<layout name='layout' />
<title>A Different Top Nav</title>
<style type="text/css">
#wrap {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	position: relative;
	background: url(body.png) center no-repeat;
	min-height: 600px;
}
#body-image {
	margin-top: 60px;
}
#main-nav {
	margin: 0px 0px 0px 2px;
	text-align: left;
	min-height: 25px;
	padding-top: 10px;
	padding-left: 0px;
}
#main-handle {
	width: 605px;
	float: right;
	margin-top: -1px;
}
#main-nav li {
	display: inline;
	list-style: none;
}
#main-nav li a {
	margin-right: 5px;
	font-size: 15px;
	text-decoration: none;
	color: #f2f2f2;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px;
	outline: 0;
	position: relative;
	top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
	background: #c6d580;
}
#sub-link-bar {
	background: #c6d580;
	min-height: 10px;
	border-bottom: #645546 1px solid;
}
.sub-links {
	display: none;
	position: absolute;
	width: 100%;
	top: -30px;
	text-align: left;
	left: 0px;
}
#main-nav li .sub-links li a:hover{
	background: #4ba108;
}
#main-nav li a.close{
	display: none;	
	position: absolute;
}
#main-nav li a.close:hover{
	background: #900;
}
<!--Thanks Spiffy Corners--> 
.round {
	display:block
}
.round * {
	display:block;
	height:1px;
	overflow:hidden;
	font-size:.01em;
	background:#645546
}
.round1 {
	margin-left:3px;
	margin-right:3px;
	padding-left:1px;
	padding-right:1px;
	border-left:1px solid #443a30;
	border-right:1px solid #443a30;
	background:#56493c
}
.round2 {
	margin-left:1px;
	margin-right:1px;
	padding-right:1px;
	padding-left:1px;
	border-left:1px solid #322a23;
	border-right:1px solid #322a23;
	background:#594c3e
}
.round3 {
	margin-left:1px;
	margin-right:1px;
	border-left:1px solid #594c3e;
	border-right:1px solid #594c3e;
}
.round4 {
	border-left:1px solid #443a30;
	border-right:1px solid #443a30
}
.round5 {
	border-left:1px solid #56493c;
	border-right:1px solid #56493c
}
.roundfg {
	background:#645546
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#main-nav li a.main-link").hover(function(){
		$("#main-nav li a.close").fadeIn();
		$("#main-nav li a.main-link").removeClass("active");												 
		$(this).addClass("active");										 
		$("#sub-link-bar").animate({
			height: "40px"					   
		});
		$(".sub-links").hide();
		$(this).siblings(".sub-links").fadeIn();
	});
	$("#main-nav li a.close").click(function(){
		$("#main-nav li a.main-link").removeClass("active");												 									 
		$(".sub-links").fadeOut();
		$("#sub-link-bar").animate({
			height: "10px"					   
		});		
		$("#main-nav li a.close").fadeOut();
	});
	
	
});

</script>
</head>

<body>
<div id="sub-link-bar"> </div>
<!-- End sub-link-bar -->
<div id="wrap">
  <div id="main-handle">
    <div class="roundfg">
      <ul id="main-nav">
        <li><a class="main-link" href="http://net.tutsplus.com/">Home</a>
        	<ul class="sub-links">
            	<li><a class="main-link" href="http://net.tutsplus.com/">Home</a></li>
            </ul>
        </li>
        <li><a class="main-link" href="http://net.tutsplus.com/category/tutorials/">Tutorials</a>
          <ul class="sub-links">
            <li><a href="http://net.tutsplus.com/category/tutorials/design-tutorials/" title="View all posts filed under Design">Design</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/" title="View all posts filed under HTML &amp; CSS">HTML &amp; CSS</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/other/" title="View all posts filed under Other">Other</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/php/" title="View all posts filed under PHP">PHP</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/ruby/" title="View all posts filed under Ruby">Ruby</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/site-builds/" title="View all posts filed under Site Builds">Site Builds</a> </li>
            <li><a href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" title="View all posts filed under Tools &amp; Tips">Tools &amp; Tips</a> </li>
            <li class="cat-item cat-item-35"><a href="http://net.tutsplus.com/category/tutorials/wordpress/" title="View all posts filed under Wordpress">Wordpress</a> </li>
          </ul>
        </li>
        <li><a class="main-link" href="http://net.tutsplus.com/category/articles/">Articles</a>
          <ul class="sub-links">
            <li ><a href="http://net.tutsplus.com/category/articles/general/" title="View all posts filed under General">General</a> </li>
            <li><a href="http://net.tutsplus.com/category/articles/interviews/" title="View all posts filed under Interviews">Interviews</a> </li>
            <li><a href="http://net.tutsplus.com/category/articles/news/" title="View all posts filed under News">News</a> </li>
            <li><a href="http://net.tutsplus.com/category/articles/web-roundups/" title="View all posts filed under Web Roundups">Web Roundups</a> </li>
          </ul>
        </li>
        <li><a class="main-link" href="http://net.tutsplus.com/category/freebies/">Freebies</a>
          <ul class="sub-links">
            <li><a href="http://net.tutsplus.com/category/freebies/books/" title="View all posts filed under Books">Books</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/icons-freebies/" title="View all posts filed under Icons">Icons</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/lightboxes/" title="View all posts filed under Lightboxes">Lightboxes</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/others/" title="View all posts filed under Others">Others</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/plugins/" title="View all posts filed under Plugins">Plugins</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/themes/" title="View all posts filed under Themes">Themes</a> </li>
            <li><a href="http://net.tutsplus.com/category/freebies/tooltips/" title="View all posts filed under Tooltips">Tooltips</a> </li>
          </ul>
        </li>
        <li><a class="main-link" href="http://net.tutsplus.com/category/videos/">Videos</a>
        	<ul class="sub-links">
            <li><a href="http://net.tutsplus.com/category/videos/screencasts/" title="Screencasts">Screencasts</a> </li>
         	</ul>
        </li>
        <li><a class="main-link" href="http://net.tutsplus.com/about">About</a>
        	<ul class="sub-links">
            	<li><a href="http://net.tutsplus.com/about/" title="About">About</a></li> 
                <li><a href="http://net.tutsplus.com/about/join-plus/" title="Join Plus">Join Plus</a></li> 
                <li><a href="http://net.tutsplus.com/about/rss-feeds/" title="RSS Feeds">RSS Feeds</a></li> 
                <li><a href="http://net.tutsplus.com/about/submissions/" title="Submit a Freebie">Submit a Freebie</a></li> 
                <li><a href="http://net.tutsplus.com/about/terms/" title="Terms">Terms</a></li> 
                <li><a href="http://net.tutsplus.com/about/write-a-tutorial/" title="Write a Tutorial">Write a Tutorial</a></li> 
            </ul>
        </li>
         <li><a class="close" title="Click to Collapse" href="#">X</a></li>
      </ul>
    </div>
    <!-- End roundfg -->
    <b class="round"> <b class="round5"></b> <b class="round4"></b> <b class="round3"></b> <b class="round2"><b></b></b> <b class="round1"><b></b></b></b> </div>
  <!-- End main-handle-->
 </div>
</body>